<script setup lang="ts">
import MenuContent from './component/menu-content.vue'
import MenuSearch from './component/menu-search.vue'
import MenuModel from './component/menu-model.vue'
import { ref } from 'vue'

// 1.绑定MenuModel
const modelRef = ref<InstanceType<typeof MenuModel>>()

// 2.新建菜单(子传父)
const handleCreateClick = () => {
  // 2.1调用modelRef新建菜单
  modelRef.value?.showModel()
}

// 3.编辑菜单（子传父携带数据）
const handleEditClick = (data: any) => {
  // 2.1调用modelRef编辑菜单并将数据传送
  modelRef.value?.showModel(false, data)
}
</script>

<template>
  <div class="menu">
    <MenuSearch />
    <MenuContent @handle-create-click="handleCreateClick" @handle-edit-click="handleEditClick" />
    <MenuModel ref="modelRef" />
  </div>
</template>

<style lang="less" scoped>
.menu {
  width: 100%;
  height: 100%;
}
</style>
